<template>
	<div class="template">
		<!-- <img class="topimg" src="../../assets/image/login/topimg.png" alt=""> -->
		<el-image class="topimg" :src="require('@/assets/image/login/topimg.png')" fit="cover"></el-image>
		<div class="contFrom">
			<div class="fromTitle">{{ formTitle }}</div>
			<el-form label-width="0px" :model="formLabelAlign">
				<el-form-item label="">
					<el-input type="text" size=" " v-model="formLabelAlign.phone" auto-complete="off" placeholder="请输入手机号">
						<template slot="prepend">+86</template>
					</el-input>
				</el-form-item>
				<el-form-item label="">
					<el-col :span="18">
						<el-form-item prop="verifyCode">
							<el-input type="text" size=" " v-model="formLabelAlign.validCode" auto-complete="off" placeholder="请输入验证码"
							 @keyup.enter.native="submitForm('ruleForm')">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" class="code-box">
						<el-button class="getCodeBtn" :type="getCodeText!=''?'info':'primary'" size=" " :disabled="getCodeText!=''?true:false"
						 @click="getCodeData">
							获取验证码
						</el-button>
					</el-col>
				</el-form-item>
				<el-form-item label="" class="timeBoxs">
					<div class="timeBox" v-if="getCodeText!=''">
						<span class="time">{{ getCodeText }}</span>后，重发验证码或通过其他途径验证。
					</div>
				</el-form-item>
				<el-form-item label="" class="">
					<el-button class="submitBtn" type="primary" @click="submitForm" size=" ">开始验证</el-button>
				</el-form-item>
			</el-form>
		</div>
		<footers></footers>
	</div>
</template>

<script>
	import footers from '../components/footers.vue'
	export default {
		components: {
			footers
		},
		data() {
			return {
				formLabelAlign: {
					phone: '',
					validCode: ''
				},
				getCodeText: '',
				checkedRead: false,
				formTitle: '输入手机号后获取验证码'
			}
		},
		mounted() {

		},
		methods: {
			submitForm() {
				if (this.formLabelAlign.phone == '') {
					this.$message.error('验证码不能为空')
					return
				}
				if (this.formLabelAlign.validCode == '') {
					this.$message.error('验证码不能为空')
					return
				}
				// 同以前先验证验证码是否正确
				this.$request.postForm(this.$api.verificationCode, this.formLabelAlign).then(res => {
					if (res.code == 200) {
						this.$message.success('验证成功')
						setTimeout(() => {
							let phone = this.formLabelAlign.phone
							let time = new Date().getTime()
							let randomCode = res.data
							this.$router.push(`/forgetthepasswords?phone=${phone}&t=${time}&code=${randomCode}`)
						}, 700)
					}
				})
			},
			getCodeData() {
				// 获取短信验证码
				let reg = /^1[3-9]{1}\d{9}$/g
				if (this.formLabelAlign.phone == '') {
					this.$message.error('手机号不能为空')
					return
				} else if (!reg.test(this.formLabelAlign.phone)) {
					this.$message.error('手机号不合法')
					return
				}
				let Time = 60
				let setTime = setInterval(() => {
					if (Time === 0) {
						this.getCodeText = ''
						clearInterval(setTime)
					} else {
						this.getCodeText = `${Time}S`
						Time -= 1
					}
				}, 1000)
				this.$request.postForm(this.$api.resetPasswordSms, {
					phone: this.formLabelAlign.phone
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('验证码已发送，请注意查看手机！')
					}
				}).catch(()=>{
					Time = 60
					clearInterval(setTime)
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.template {
		width: 100%;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.topimg {
		width: 100%;
		height: 400px;
	}

	.contFrom {
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		width: 500px;
		margin-top: 50px;
		margin-bottom: 150px;
	}

	.fromTitle {
		color: #333333;
		font-size: 30px;
		margin-bottom: 40px;
	}

	.code-box {
		text-align: right;
	}

	.submitBtn {
		width: 100%;
	}

	.el-form-item--small.el-form-item {
		margin-bottom: 30px;
	}

	.time {
		color: #23B14D;
	}

	.timeBox {
		color: #919593;
		font-size: 12px;
	}

	.timeBoxs {
		margin-top: -30px;
	}

	.getCodeBtn {
		width: calc(100% - 20px);
	}
</style>
